<template>
    <div class="first_audit">
        <div class="data_list">
            <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                <el-table-column align="left" prop="id" :label="$t('common.serialNumber')"></el-table-column><!--序号-->
                <el-table-column align="left" prop="name" :label="$t('common.accountName')"><!--账号名称-->
                    <template slot-scope="scope">
                        <a v-if="!isCaptain" href="javascript:void(0);" @click="searchAuditOrder(scope.row)" :disabled="scope.row.isDelete === 1">{{ scope.row.name }}</a>
                        <span v-else>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="typeName" :label="$t('common.roleType')"><!--角色类型-->
                    <template slot-scope="scope">{{ $root.local === 'zhCN' ? scope.row.typeName : scope.row.typeIdName}}</template>
                </el-table-column>

                <el-table-column align="left" :label="$t('authority.accountStatus')" prop="roleName"><!--账号状态-->
                    <template slot-scope="scope">{{ scope.row.isDelete === 0 ? $t('common.enable') : $t('common.close')}}</template>
                </el-table-column>

                <el-table-column align="left" prop="leader" :label="$t('authority.ownGroup')"></el-table-column><!--所属组别-->
                <el-table-column align="left" prop="remainOrderCount" :label="$t('authority.remainingOrder')"></el-table-column><!--剩余单量-->
                <el-table-column align="left" prop="maxNum" :label="$t('authority.everydayLimit')"><!--每日进件上限-->
                    <template slot-scope="scope">
                        <span @click="showSetNum(scope.row)"><i class="el-icon-edit"></i>{{ scope.row.maxNum }}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="allocationOrderSelectionShow" align="left" prop="appName" :label="$t('common.chooseAssignOrder')"><!--分单选择-->
                    <template slot-scope="{ row }">
                        <el-button @click="chooseAssignOrder(row)" type="text" :disabled="row.isDelete === 1">
                            <div style="line-height: 20px" v-for="app in row.appList" :key="app">{{ app }}</div>
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="auditSwitch" :label="$t('common.isAssignOrder')"><!--是否进件-->
                    <template slot-scope="scope">
                        <el-switch @change="changeStatus(scope.row)" v-model="scope.row.auditSwitch" :disabled="scope.row.isDelete == '1'">{{ $t('common.isAssignOrder') }}</el-switch>
                    </template>
                </el-table-column><!--是否进件-->
                <el-table-column v-if="!isCaptain" align="left" prop="auditorCount" :label="$t('authority.doGroup')"><!--去分组-->
                    <template slot-scope="scope">
                        <el-button @click="showGroupDialog(scope.row)" type="text" :disabled="scope.row.isDelete == '1'">{{$t('authority.verifyGroup')}}</el-button>
                    </template>
                </el-table-column><!--去分组-->
            </el-table><!--end table-->
        </div>

        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

        <!--设置每日进件上限-->
        <el-dialog :visible.sync="showNumDialog" width="416px" :title="$t('authority.setEverydayUpperCase')">
            <el-form ref="form" :model="form" :rules="rules" label-position="top">
                <el-form-item prop="maxNum" :label="$t('authority.everydayLimit')"><!--每日进件上限-->
                    <el-input v-model="form.maxNum" type="text" :placeholder="$t('verify.plsInput')"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showNumDialog = false" type="default">{{$t('common.cancel')}}</el-button>
                <el-button @click="setNum" type="primary">{{$t('common.submit')}}</el-button>
            </div>
        </el-dialog><!--设置每日进件上限end-->

        <!--修改初审分组-->
        <el-dialog :visible.sync="showSetGroupDialog" width="416px" :title="$t('authority.firstAuditGrouping')">
            <el-form ref="form" :model="groupForm" label-position="top">
                <el-form-item :label="$t('common.accountName')"><!--账号名称-->
                    <el-input :disabled="true" v-model="groupForm.auditorName" type="text" :placeholder="$t('verify.plsInput')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('authority.groupList')"><!--组别列表-->
                    <el-select v-model="groupForm.groupId" :placeholder="$t('verify.plsChoose')" style="width: 100%;">
                        <el-option v-for="item in captainList" :key="item.auditorId" :value="item.auditorId" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showSetGroupDialog = false" type="default">{{$t('common.cancel')}}</el-button>
                <el-button @click="setGroup" type="primary">{{$t('common.save')}}</el-button>
            </div>
        </el-dialog>
        <!--修改分组end-->

        <!--分单选择弹框-->
        <el-dialog :visible.sync="showChooseAssignOrderDialog" width="416px" :title="$t('common.chooseAssignOrder')">
            <el-form ref="chooseAssignOrderForm" :model="chooseAssignOrderForm" :rules="chooseAssignOrderRules" label-position="top">
                <el-form-item prop="appName">
                    <select-app-list v-model="chooseAssignOrderForm.appName" :multiple="true" :placeholder="$t('system.appName')" :clearable='false'></select-app-list><!--app名称-->
                </el-form-item>
            </el-form>
<!--            <div v-show="chooseAssignOrderForm.appName.length===0" style="margin-top: 10px" class="color_red">{{ $tc('verify.plsSelectLeastOne') }}</div>-->
            <div slot="footer">
                <el-button @click="submitChooseAssignOrder" type="primary">{{$t('common.confirmOk')}}</el-button>
                <el-button @click="showChooseAssignOrderDialog = false" type="default">{{$t('common.cancel')}}</el-button>
            </div>
        </el-dialog>
        <!--分单选择弹框end-->
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import SelectAppList from '@/components/select-app-list';

    export default {
        name: 'firstAudit',
        components: {
            Pagination,
            SelectAppList
        },
        mixins: [mixin],
        props: {
            activeTab: {
                type: String,
                required: true
            },
            searchForm: {
                type: Object,
                required: true
            },
            isCaptain: {
                type: Boolean,
                required: true
            }
        },
        data() {
            return {
                thisRoleType: 1,
                form: {
                    auditorId: '',
                    maxNum: ''
                },
                showNumDialog: false,
                rules: {
                    maxNum: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'},
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputInteger'), trigger: 'blur'}
                    ]
                },
                showSetGroupDialog: false,
                groupForm: {
                    auditorId: '',
                    auditorName: '',
                    groupId: ''
                },
                captainList: [],
                showChooseAssignOrderDialog: false,
                chooseAssignOrderForm: {
                    appName: [],
                    auditorId: ''
                },
                chooseAssignOrderRules: {
                    appName: [
                        { required: true, message: this.$tc('verify.plsSelectLeastOne') }, // 请至少选择一个
                    ],
                },
            };
        },
        computed: {
            allocationOrderSelectionShow() {
                // 检查分单选择字段展示权限
                return this.$store.getters.checkUserAuthority('/audit/authority-manage/allocation-order-selection');
            },
        },
        watch: {
            activeTab(val) {
                if ('firstAudit' === val) {
                    this.page.currentPage = 1;
                    this.getTableData();
                    if (this.captainList.length === 0) {
                        this.getCaptainList();
                    }
                }
            },
            'searchForm.search'(val) {
                if (val && this.activeTab === 'firstAudit') {
                    this.page.currentPage = 1;
                    this.getTableData();
                }
            }
        },
        methods: {
            getTableData(page = this.page) {
                const params = {
                    type: this.thisRoleType,
                    name: this.searchForm.accountName,
                    isDelete: this.searchForm.isDelete,
                    leaderId: this.searchForm.leaderId,
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                this.tableData = [];
                this.$api.authorityManage.getAllAuditorInfo(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data.data) {
                        this.tableData = data.data;
                        this.page.recordsTotal = data.pageCount;
                        this.tableData.forEach((item) => {
                            item.auditSwitch = +item.auditSwitch === 1;
                            item.appList = item.appName.split(',');
                        });
                        if (this.searchForm.search) {
                            this.$emit('search', this.searchForm);
                        }
                        this.tableMaxHeight = window.document.body.clientHeight - 160;
                    }
                });
            },
            changeStatus(row) {
                const params = {
                    auditorId: row.auditorId,
                    auditSwitch: row.auditSwitch ? '1' : '0'
                };
                this.$api.authorityManage.updateAuditorInfo(params).then((res) => {
                    const {status, error} = res;
                    if ('1' === status && '00000000' === error) {
                        this.$message.success(this.$t('common.successfulOperation'));
                        this.getTableData();
                    }
                });
            },
            setNum() {
                this.$refs.form.validate((val) => {
                    if (val) {
                        const params = {
                            auditorId: this.form.auditorId,
                            maxNum: this.form.maxNum
                        };
                        this.$api.authorityManage.updateAuditorInfo(params).then((res) => {
                            const {status, error} = res;
                            if ('1' === status && '00000000' === error) {
                                this.showNumDialog = false;
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.getTableData();
                            }
                        });
                    }
                });
            },
            showSetNum(row) {
                this.form.auditorId = row.auditorId;
                this.form.maxNum = row.maxNum;
                this.showNumDialog = true;
            },
            showGroupDialog(row) {
                this.groupForm.auditorId = row.auditorId;
                this.groupForm.auditorName = row.name;
                this.groupForm.groupId = row.leaderId;
                this.showSetGroupDialog = true;
            },
            setGroup() {
                const params = {
                    auditorId: this.groupForm.auditorId,
                    leaderId: this.groupForm.groupId
                };
                this.$api.authorityManage.changeAuditorGroup(params).then((res) => {
                    const {status, error} = res;
                    if ('1' === status && '00000000' === error) {
                        this.showSetGroupDialog = false;
                        this.$message.success(this.$t('authority.verifySucc'));
                        this.getTableData();
                    }
                });
            },
            getCaptainList() {
                const params = {
                    type: 3,
                    name: '',
                    leaderId: ''
                };
                // this.tableData = [];
                this.$api.authorityManage.getAllAuditorInfo(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data.data) {
                        this.captainList = data.data;
                    }
                });
            },
            searchAuditOrder(row) {
                this.$emit('getData', {
                    accountName: row.name,
                    roleType: '1',
                    auditorId: row.auditorId
                }, 'orderFirstAudit');
            },
            //分单选择更改弹框
            chooseAssignOrder(row) {
                this.chooseAssignOrderForm.appName = row.appName.split(',');
                this.chooseAssignOrderForm.auditorId = row.auditorId;
                this.showChooseAssignOrderDialog = true;
            },
            submitChooseAssignOrder() {
                this.$refs.chooseAssignOrderForm.validate((val) => {
                    if (val) {
                        const form = this.chooseAssignOrderForm;
                        const params = {
                            auditorId: form.auditorId,
                            appName:  form.appName.join(','),
                        };
                        this.$api.authorityManage.updateAuditorInfo(params).then((res) => {
                            const {status, error} = res;
                            if ('1' === status && '00000000' === error) {
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.getTableData();
                                this.showChooseAssignOrderDialog = false;
                            }
                        });
                    }
                });
            }
        },
        created() {
            if (this.activeTab === 'firstAudit') {
                this.getTableData();
            }
        }
    };
</script>

<style lang="scss" scoped>
    .data_list {
        background-color: #fff;
        padding: 10px 16px;
    }
</style>
